import React, { useEffect, useState } from 'react'
import ReactDOM from 'react-dom'
import { ConfigProvider } from '@ones-design/core'
import { lifecycle, OPProvider } from '@ones-op/bridge'
import { OPFetch } from '@ones-op/fetch'

import './index.css'

const fetchProject = OPFetch.create({ baseURL: '/project/api/project' })

const AppPage: React.FC = () => {
  const [content, setContent] = useState('')

  useEffect(() => {
    getContent()
  }, [])

  async function getContent() {
    const url = `/notice/getData`
    const res = await fetchProject({
      url,
      method: 'GET',
      headers: {
        // 注意这里，如果接口是组织类型的，就是用 organization，如果是团队类型的，就是用 team
        'ones-check-point': 'organization',
      },
    })
    setContent(res.data.data.content)
  }

  if (content) {
    return <div className="banner">{content}</div>
  } else {
    return <></>
  }
}

ReactDOM.render(
  <ConfigProvider>
    <OPProvider>
      <AppPage />
    </OPProvider>
  </ConfigProvider>,
  document.getElementById('ones-mf-root')
)

lifecycle.onDestroy(() => {
  ReactDOM.unmountComponentAtNode(document.getElementById('ones-mf-root'))
})
